<template>
	<div class="nave">
		<ul class="top_nav">
			<li  @click="active"><span>商品</span></li>
			<li  @click="active"><span>详情</span></li>
		</ul>
		<div class="food" v-show="show">
			<div class="left" >
				<ul>
					<li v-for="(item,index) in datas" :key="index" @click="fen(index)" :class="{blue:i===index}">
						<a href="javascript:void(0)" rel="external nofollow" @click="goAnchor('#anchor-'+index)" class="a1" >{{item.name}}</a>
					</li>
				</ul>
			</div>
			<div class="right">
				<!-- <p>{{item.name}}</p> -->
				<div v-for="(item,index) in datas" :key="index">
					<p :id="'anchor-'+index" style="line-height: 40px; font-size: 20px;">{{item.name}}<span style="color: #999999; font-size: 10px; margin-left: 10px;">{{item.description}}</span></p>
					<div v-for="(aaa,index) in item.foods" :key='index' class="right_s">
						<div class="img">
							<img :src="'//elm.cangdu.org/img/'+aaa.image_path" alt="">
						</div>
						<div class="nav_img">
							<p class="p1">{{aaa.name}} <span>招牌</span></p>
							<p>{{aaa.description}}</p>
							<p>{{aaa.tips}}</p>
							<div class="p2">
								<div class="p3" >
									<span v-for="(a,index) in aaa.specfoods" :key='index'>￥{{a.price}}</span>
									<button @click="go(aaa.name,aaa.specfoods[0].price)">选规格</button>
								</div>
								<!-- 遮盖层 -->
								<div class="shdow" v-show="shdow">
									<div class="shdow_middle">
										<div class="one" >
											<p>{{ isName }}</p>
											<p @click="down">×</p>
										</div>
										<div class="two">
											<p>规格</p>
											<p>默认</p>
										</div>
										<div class="three">
											<p>￥ {{ isPrice }}</p>
											<p @click="join(item.id,isName,isPrice)">加入购物车</p>
										</div>
									</div>

								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="bycar" v-show="car">
			<div class="bycar_all">
				<div class="bycar_top">
					<p>购物车</p>
					<p @click="qingkong">清空</p>
				</div>
				<ul class="bycar_bottom">
					<li v-for="(i,k) in shoppcar" :key='k'>
						<p>{{i.name}}</p>
						<p>{{i.count}}</p>
						<p>￥{{i.price}}</p>
					</li>
				</ul>
			</div>
		</div>
		<div v-show="!show">
			<b_food_x></b_food_x>
		</div>
		<div class="wrap">
			<div class="car_left">
				<p class="big" v-if='$store.getters.getcount * isPrice >=20'>￥ {{this.$store.getters.getcount * this.isPrice}}</p>
				<p class="big" v-if='$store.getters.getcount * isPrice <20'>￥ 00.00</p>
				<p>配送费￥5</p>
			</div>
			<div class="car_right" @click="gopay">去结算</div>
			<div class="logo" @click="carshop">&#xe618;</div>
			<div class="num"><span>{{this.$store.getters.getcount}}</span></div>
			
		</div>
	</div>
</template>

<script>
	import b_food_x from "../components/b_food_x.vue"
	export default {
		name: 'ser',
		data: function() {
			return {
				datas: [],
				counter:0,
				show:true,
				i:0,
				shdow:false,
				num:0,
				car:false,
				zrr:[],
				isName: '',
				isPrice: '',
				count:1,
				shoppcar:[]

			}
		},
		components:{
			b_food_x
		},
		created() {
			
			this.$axios({
				url: 'https://elm.cangdu.org/shopping/v2/menu?restaurant_id=' + this.$route.query.id,
				method: 'get',
			}).then(res => {
				this.datas = res.data;
				window.console.log(res.data);
			})
		},
		methods:{
			qingkong() {
				window.console.log(this.$store.getters.getcount);
				this.$store.getters.getcount = 0;
			},
			gopay() {
				this.$router.push("/order");
			},
			carshop:function() {
				this.car = !this.car;
				
			},
			join:function(id,name,price){
				let shoppcar ={
					id:id,
					name:name,
					price:price,
					count:this.count
				}
				window.console.log(shoppcar);
				this.$store.commit('changecar',shoppcar)
				this.shoppcar = JSON.parse(sessionStorage.getItem('car'));
				window.console.log(this.shoppcar);
				this.shdow = false;
				
			},
			go:function(name, money){
				this.isName = name
				this.isPrice = money
				this.shdow = true;
			},
			down:function(){
				this.shdow = false;
			},
				active:function () {
						this.show = !this.show;
						this.i = index;
				},
				fen:function (index){
					 this.i = index;
				},
				guige:function(){
					
				},
				goAnchor(selector) {
				     var anchor = this.$el.querySelector(selector)
				     document.documentElement.scrollTop = anchor.offsetTop
				},
		}
	}
</script>

<style scoped>
	.big {
		font-size: 16px;
		font-weight: 700;
	}
	.car_left {
		width: 220px;
		height: 40px;
		color: white;
		padding-left: 75px;
	}
	.bycar_top {
		width: 100%;
		display: flex;
		justify-content: space-between;
		padding: 10px 0;
	}
	.bycar_bottom li{
		width: 100%;
		display: flex;
		justify-content: space-between;
	}
	.bycar{
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.1);
		position: fixed;
		bottom: 0;
		left: 0;
		/* display: none; */
	}
	.bycar_all {
		width: 100%;
		position: fixed;
		bottom: 40px;
		left: 0;
		background: white;
		/* background: rgba(0,0,0,0.1); */
	}
	.num span{
		background: #ff461D;
		border-radius: 50%;
		padding: 0 3px;
		color: white;
		position: fixed;
		left: 19%;
		bottom: 45px;
	}
	.wrap {
		background: #555;
		height: 40px;
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}
	.car_right {
		height: 40px;
		background: #4CD964;
		width: 100px;
		font-size: 14px;
		line-height: 40px;
		color: white;
		position: absolute;
		right: 0;
		top: 0;
		text-align: center;
	}
	.logo {
		font-family: 'iconfont';
		width: 40px;
		height: 40px;
		border: 5.2px solid #444;
		border-radius: 50%;
		background: rgb(49,144,232);
		position: fixed;
		left: 5%;
		bottom: 10px;
		font-size: 28px;
		line-height: 40px;
		text-align: center;
		color: white;
	}
	.three {
		padding: 10px 0;
		display: flex;
		justify-content: space-between;
	}
	.three p:nth-of-type(1){
		color: #FF6600;
		font-size: 16px;
		margin-left: 20px;
	}
	.three p:nth-of-type(2){
		background: #3190E8;
		border-radius: 3px;
		margin-right: 20px;
		color: white;
		padding: 1px 3px;
	}
	.two {
		width: 224px;
		height: 85px;
		padding: 10px;
	}
	.two p:nth-of-type(1) {
		font-size: 12px;
		color: #666;
		line-height: 16px;
	}
	.two p:nth-of-type(2) {
		box-sizing: border-box;
		margin-top: 10px;
		font-size: 12px;
		width: 50px;
		height: 29px;
		border: 1px solid #3190E8;
		color: #3190E8;
		padding: 6px 10px;
		border-radius: 5px;
	}
	.shdow .shdow_middle .one p:nth-of-type(1){
		text-align: center;
		box-sizing: border-box;
		color: #222;
		font-size: 14px;
		width: 224px;
		height: 39px;
		padding: 10px;
	}
	.shdow .shdow_middle .one p:nth-of-type(2) {
		font-size: 30px;
		position: absolute;
		top: 10px;
		right: 10px;
	}
	.shdow {
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.01);
		position: fixed;
		top: 0;
		left: 0;
	}
	.shdow .shdow_middle {
		width: 80%;
		background: white;
		border-radius: 5px;
		position: fixed;
		top:40%;
		left: 10%;
	}
	* {
		margin: 0;
		padding: 0;
	}
	.blue{
		color: #3190e8;
		border-left: 2px solid #3190e8;
	}
	.blues{
		color: #3190e8;
		border-bottom: 2px solid #3190e8;
	}
	.top_nav{
		position: fixed;
		left: 0;
		top: 122px;
	}
	ul {
		width: 100%;
		overflow: hidden;
		background: #FFFFFF;
		padding: 5px 0 10px 0;
	}

	ul li {
		float: left;
		width: 50%;
		font-size: 14px;
		text-align: center;
		line-height: 30px;
		color: #000000;
		list-style: none;
	}
	.a1{
		color: #000000;
		text-decoration: none;
	}
/* 	ul li:first-child{
		color: #007AFF;
	} */
	.food {
		width: 100%;
		overflow: hidden;
	/* 	margin-top: 5px; */
	}

	.left {
		position: fixed;
		top: 160px;
		left: 0;
		width: 25%;
		overflow: hidden;
		box-sizing: border-box;
	}

	.left ul li {
		font-size: 12px;
		line-height: 25px;
		padding: 13px 5px;
		width: 100%;
		box-sizing: border-box;
		list-style: none;
	}

	.left li:first-child {
		/* 		border-left: 2px solid #3190e8; */
		background: #FFFFFF;
	}

	.right {
		float: right;
		margin-top: 170px;
		width: 74%;
		overflow: hidden;
		padding-right: 5px;
		box-sizing: border-box;
	}

	
	.right_s{
		overflow: hidden;
		width: 100%;
		padding-top: 15px;
		background: #FFFFFF;
	}
	.img{
		width: 20%;
		float: left;
		overflow: hidden;
	}
	.img img{
		width: 100%;
	}
	.nav_img{
		width: 75%;
		float: left;
		padding-left: 5px;
		overflow: hidden;
	}
	.nav_img p {
		font-size: 8px;
		color: #666666;
		line-height: 20px;
	}
	.nav_img .p1{
		font-size: 12px;
		color: #666666;
		line-height: 20px;
	}
	.nav_img p span{
		float: right;
		margin-right: 10px;
		border: 0.2px solid #FF5340;
		border-radius:5px;
		font-size: 8px;
		line-height: 10px;
	}
	.nav_img .p2{
		line-height: 30px;
		overflow: hidden;
	}
	.nav_img .p2 span{
		float: left;
		color: #FF0000;
		font-size: 12px;
		
		border: 0;
	}
	.nav_img .p2 .p3{
		float: right;
		padding-top: 5px;
	}
	.p3 button{
		padding: 2px;
		outline: none;
		font-size: 13px;
		border: 0;
		background: #3190E8;
		color: #FFFFFF;
		border-radius: 3px;
	}
	@font-face {
	  font-family: 'iconfont';  /* project id 1584923 */
	  src: url('//at.alicdn.com/t/font_1584923_oau1n60buqg.eot');
	  src: url('//at.alicdn.com/t/font_1584923_oau1n60buqg.eot?#iefix') format('embedded-opentype'),
	  url('//at.alicdn.com/t/font_1584923_oau1n60buqg.woff2') format('woff2'),
	  url('//at.alicdn.com/t/font_1584923_oau1n60buqg.woff') format('woff'),
	  url('//at.alicdn.com/t/font_1584923_oau1n60buqg.ttf') format('truetype'),
	  url('//at.alicdn.com/t/font_1584923_oau1n60buqg.svg#iconfont') format('svg');
	}
</style>
